<template>
  <div class="sub-category">
    <div class="container">
      <!-- 面包屑 -->
      <SubBread></SubBread>
      <!-- 过滤 -->
      <SubFilter></SubFilter>

      <div class="goods-list">
        <!-- 排序区 -->
        <SubSort></SubSort>
        <!-- 排序 -->
        <SubList></SubList>
      </div>
    </div>
  </div>
</template>

<script>
import { findSubCategoryFilter } from '@/api/category.js'
import { ref, onMounted, provide } from 'vue'
import { useRoute } from 'vue-router'
import SubBread from './componments/sub-bread.vue'
import SubFilter from './componments/sub-filter.vue'
import SubSort from './componments/sub-sort.vue'
import SubList from './componments/sub-list.vue'
export default {
  name: 'SubCategory',
  components: {
    SubBread,
    SubFilter,
    SubSort,
    SubList
  },
  setup () {
    const subCates = ref({})
    const route = useRoute()
    async function getSubXates () {
      const { result } = await findSubCategoryFilter(route.params.id)
      /**
      * 需求:增加品牌和规格数据增加全部选项和为每个现象增加选中状态数据
      */
      // 1. 给品牌增加选中状态和全部选项
      result.brands.forEach(brand => {
        brand.selected = false
      })
      result.brands.unshift({
        id: null,
        name: '全部',
        selected: true
      })

      // 2. 给规格增加全部选项
      result.saleProperties.forEach(item => {
        item.properties.forEach(prop => {
          prop.selected = false
        })
        item.properties.unshift({
          id: null,
          name: '全部',
          selected: true
        })
      })
      subCates.value = result
    }
    // 提供二级分类数据给子组件
    provide('subCates', subCates)
    onMounted(() => {
      getSubXates()
    })
    // 筛选条件
    const filterParams = ref({
      attrs: [], // 一般商品属性 => {groupName: "规格", propertyName: "CPE加厚手套-100只/盒"}
      sortField: null, // 排序 => // publishTime(最新), orderNum(人气), price(价格), evaluateNum(评论)
      brandId: null // 品牌ID => '1'
    })
    // 提供过滤条件数据
    provide('filterParams', filterParams)
    return { subCates }
  }
}
</script>
<style scoped lang='less'>
.goods-list {
  background: #fff;
  padding: 0 25px;
  margin-top: 25px;
}
</style>
